<html>
   <head>
      <title>Group Info</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="icon" type="image/png" href="./images/favicon.png"></link>

      <link rel="STYLESHEET" href="./style/fonts.css" type="text/css">
      <link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <style>
       .hidden {
          display: none;
       }
       table, th, td {
          border: 3px solid silver;
          padding: 5px;
          border-collapse: collapse;
       }
       #notes-area {
          font-size: 14pt;
          width: 40em;
       }
       #notes-text {
          background-color: #F2F2F2;
          width: 100%;
          margin-bottom: 10px;
          display: block;
       }
       #notes-buttons > button {
          font-size: 14pt;
          background-image: linear-gradient(#DDDDDD, #C0C0C0);
          float: right;
          height: 1.5em;
          width: 5em;
          margin-left: 0.3em;
       }

       .views {
          border: none;
          text-align: left;
          min-width: 150px;
       }
       .thumbnail {
          border: none;
          height: 100%;
          vertical-align: top;
          text-align: center;
       }
       .programLink{
          color: #0000EE;
          cursor: pointer;
       }
       img {
          display: block;
          margin: auto;
       }
       .indent1 {
          margin-left: 1cm;
       }
       .indent2 {
          margin-left: 2cm;
       }


       /* Subset editor styling */
       #naming-editor {
          font-size: 11pt;
          text-align: center;
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgba(0,0,0,0.4); /* Gray mist */
       }

       #udredit-content {
          background-color: #E4E4E4;		/* nearly white (~white smoke) */
          margin: auto;
          border: 1px solid #BFBFBF;		/* ~silver */
          width: 49em;
       }

       #udredit-header {
          padding: 0.3em;
       }

       #udredit-title {
          background: #4D4D4d;		/* dark gray */
          color: #FFFFFF;               /* white font */
          padding: 0.3em;
       }

       #udredit-body {
          height: 200px;
          padding: 0 1em;
       }

       #udredit-table {
          width: 100%;
          height: 100%;
          margin: 0 1em;
          table-layout: fixed;
          border-collapse: collapse;
          border: none;
       }

       #udredit-table tbody {
          display: block;
          overflow: auto;
          height: 100%;
       }

       #udredit-table thead tr {
          display: block;
       }

       #udredit-table th,
       #udredit-table td {
          border: 1px solid black;
          width: 20em;
          padding: 2px;
       }

       #udredit-table th {
          background-color: #D2D2D2;
       }

       #udredit-table td {
          background-color: #FFFFFF;
       }

       .udredit-button {
          background-image: linear-gradient(#DDDDDD, #C0C0C0);
          border: 1px solid #7E7E7E;
          height: 26px;
          width: 80px;
          font-size: 12pt;
          margin: 10px;
          float: right;
       }
      </style>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script type="text/x-mathjax-config">
       MathJax.Hub.Config({
      	  CommonHTML: {
             scale: 90,
          },
       });
      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_CHTML"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
      <script src="./build/allGroupExplorer.js"></script>
      <script src="./build/allSheets.js"></script>
      <script src="./GroupInfo.js"></script>
   </head>

   <body>
      <h2 id="heading" align="center" style="margin-bottom: 1em">
         <template id="heading_template">
            ${MathML.sans(group.name + ((group.phrase == "") ? '' : '<mtext>&nbsp;- ' + group.phrase + '</mtext>'))}
         </template>
      </h2>
      <div class="top-right-menu">
         <div>
            <a href='index.html'>
               <i title="Project Home" class="fa fa-home fa-2x trm-black"></i></a>
            <a href='GroupExplorer.html'>
               <i title="Group Library" class="fa fa-book fa-2x trm-black"></i></a>
            <a href='Sheet.html' target='_blank'>
               <i title="Sheets" class="fa fa-file trm-black" style="font-size:1.5em;vertical-align:10%;"></i></a>
            <a href='help/rf-um-groupwindow/index.html'>
               <i title="Help" class="fa fa-question-circle fa-2x trm-black"></i></a>
            <a href='https://github.com/nathancarter/group-explorer'>
               <i title="Source on GitHub" class="fa fa-github fa-2x trm-black"></i></a>
         </div>
         <div id="version" style="float: right; font-size: small"></div>
         <script>document.getElementById('version').textContent = Version.label</script>
      </div>

      <div align="center">
         Contents: &nbsp;
         <a href="#Basic_facts">Facts</a> &nbsp; | &nbsp;
         <a href="#Views">Views</a>  &nbsp; | &nbsp;
         <a href="#Description">Description</a> &nbsp; | &nbsp;
         <a href="#Computed_properties">Computed properties</a> &nbsp; | &nbsp;
         <a href="#Related_sheets">Related sheets</a> &nbsp; | &nbsp;
         <a href="#File_data">File data</a> &nbsp; | &nbsp;
         <a href="#Other_definitions">Other definitions</a> &nbsp; | &nbsp;
         <a href="#Generators">Generators</a> &nbsp; | &nbsp;
         <a href="#Naming_schemes">Naming schemes</a> &nbsp; | &nbsp;
         <a href="#Notes">Notes</a>
      </div>
      <hr>

      <h3 id="Basic_facts">Basic facts</h3>
      <div class="indent1">
         <table id="basic-fact-table">
         </table>
         <div class='gapcode' data-built-in-code-type='create group'></div>
         <template id="basicFact-template">
            <tr><th align="right">${basicFact.displayName}</th>
               <td align="left">${MathML.sans(basicFact.formattedValue)}</td>
            </tr>
         </template>
      </div>

      <h3 id="Views">Views</h3>
      <div class="indent1">
         Click any view to open a copy for exploration.
         <br><br>
         <table id="ViewTable" class="views">
            <!-- 100x100 thumbnails for pictures -->
            <tr>
               <th class="views">Cayley Diagram</th>
               <th class="views">Cycle Graph</th>
               <th class="views">Multiplication Table</th>
               <th class="views">Object of Symmetry</th>
            </tr>
            <tr>
               <td class="views">
                  <a href="help/rf-groupterms/index.html#cayley-diagrams">Help on this</a></td>
               <td class="views">
                  <a href="help/rf-groupterms/index.html#cycle-graph">Help on this</a></td>
               <td class="views">
                  <a href="help/rf-groupterms/index.html#multiplication-table">Help on this</a></td>
               <td class="views">
                  <a href="help/rf-groupterms/index.html#objects-of-symmetry">Help on this</a></td>
            </tr>
            <template id="view_row_template">
               <tr>
                  <td class="thumbnail"></td>
                  <td class="thumbnail"></td>
                  <td class="thumbnail"></td>
                  <td class="thumbnail"></td>
               </tr>
            </template>
         </table>
      </div>
      <div class="indent1">
         To see all of these visualizations shown together on a sheet,
         <a href="" class="show-all-visualizers-sheet">click here</a>.
      </div>

      <h3 id="Description">Description</h3>
      <div id="description" class="indent1">
         <i>None</i>
      </div>

      <h3 id="Computed_properties">Computed Properties</h3>
      <div id="computed-properties" class="indent1">
         <template id="computedProperties_template">
            <table>
               <tr>
                  <th align="right">Abelian group</th>
                  <td>${group.isAbelian ? 'yes' : 'no'}</td>
                  <td page="AbelianInfo.html" class="programLink">Tell me more</td>
               </tr>
               <tr>
                  <th align="right">Class equation</th>
                  <td>${displayClassEquation()}</td>
                  <td page="ClassEquationInfo.html" class="programLink">Tell me more</td>
               </tr>
               <tr>
                  <th align="right">Cyclic group</th>
                  <td>${group.isCyclic ? 'yes' : 'no'}</td>
                  <td page="CyclicInfo.html" class="programLink">Tell me more</td>
               </tr>
               <tr>
                  <th align="right">Subgroups</th>
                  <td>${group.subgroups.length}</td>
                  <td page="SubgroupInfo.html" class="programLink">Tell me more</td>
               </tr>
               <tr>
                  <th align="right">Order classes</th>
                  <td>${displayOrderClasses()}</td>
                  <td page="OrderClassesInfo.html" class="programLink">Tell me more</td>
               </tr>
               <tr>
                  <th align="right">Solvable group</th>
                  <td>${group.isSolvable ? 'yes' : 'no'}</td>
                  <td page="SolvableInfo.html" class="programLink">Tell me more</td>
               </tr>
            </table>
         </template>
         <template id="Z_mn-row-template">
            <tr>
               <th align="right">${MathML.sans(MathML.sub('&Zopf;', 'mn') + '<mtext>&nbsp;group</mtext>')}</th>
               <td>= ${MathML.sans(MathML.sub('&Zopf;', m) + '<mo>&times;</mo>' + MathML.sub('&Zopf;', n))}</td>
               <td page="ZmnInfo.html" class="programLink">Tell me more</td>
            </tr>
         </template>
         <template id="not-Z_mn-row-template">
            <tr>
               <th align="right">${MathML.sans(MathML.sub('&Zopf;', 'mn') + '<mtext>&nbsp;group</mtext>')}</th>
               <td>= no ${MathML.sans(MathML.sub('&Zopf;', 'm') + '<mo>&times;</mo>' + MathML.sub('&Zopf;', 'n'))}</td>
               <td page="ZmnInfo.html" class="programLink">Tell me more</td>
            </tr>
         </template>
      </div>

      <h3 id="Related_sheets">Related Sheets</h3>
      <div id="related-sheets" class="indent1">
         <i>(Not implemented)</i>
      </div>

      <h3 id="File_data">File Data</h3>
      <div id="file-data" class="indent1">
         <template id="fileData_template">
            <table>
               <tr><th align="right">Author</th><td align="left">${group.author}</td></tr>
               <tr><th align="right">URL</th><td align="left">${group.URL}</td></tr>
               <tr><th align="right">Last modified</th><td align="left">${group.lastModifiedOnServer}</td></tr>
            </table>
         </template>
      </div>

      <h3 id="Other_definitions">Other definitions</h3>
      <div id="other-definitions" class="indent1">
         <i>(Not implemented)</i>
      </div>

      <h3 id="Generators">Generators</h3>
      <div id="generators" class="indent1">
         There are no generators in this group, only the identity element.
      </div>


      <h3 id="Naming_schemes">Naming Schemes</h3>

      <h4 class="indent1">Default element names</h4>
      <div id="default-element-names" class="indent2"></div>

      <h4 class="indent1">Loaded naming schemes</h4>
      <div id="loaded-naming-schemes" class="indent1"></div>
      <template id="loadedSchemeChoice-template">
         <li>${scheme}
            <a href="javascript:setRep(${index})">Click here</a> to make this the default representation
         </li>
      </template>


      <h4 class="indent1">User-defined naming schemes</h4>
      <div id="no-user-defined-naming-schemes" class="indent1">
         <i>none</i><br><br>
      </div>
      <div id="user-defined-naming-schemes" class="indent1 hidden">
      </div>
      <a class="indent1" href="javascript:UDR.create()">Click here</a> to add a new representation for this group.
      <template id="userSchemeChoice-template">
         <li>${scheme}
            <a href="javascript:UDR.setRep(${index})">Click here</a> to make this the default representation.<br>
            <a href="javascript:UDR.edit(${index})">Click here</a> to edit this representation.<br>
            <a href="javascript:UDR.remove(${index})">Click here</a> to remove this representation.
         </li>
      </template>
      <template id="inUseScheme-template">
         <li>The default naming scheme shown above<br>
            If you wish to edit or remove this representation, first make a different representation the default.
         </li>
      </template>
      <template id="namingEditor-template">
         <div id="naming-editor">
            <div id="udredit-content" class="vert">
               <div id="udredit-title">Edit naming scheme for ${MathML.sans(group.name)}</div>
               <div id="udredit-header">
                  Below are all the naming schemes for ${MathML.sans(group.name)}.  Edit the Custom
                  representation column by clicking on the entries you wish to change and typing any plain text.
               </div>
               <div id="udredit-body">
                  <table id="udredit-table">
                     <thead>
                        <tr>
                           <th>Default representation</th>
                           <th>Custom representation</th>
                        </tr>
                     </thead>
                     <tbody>
                     </tbody>
                  </table>
               </div>
               <div style="height: 45px">&nbsp;
                  <button class="udredit-button" onclick="UDR.closeEdit()">Cancel</button>
                  <button class="udredit-button" onclick="UDR.saveEdit()">OK</button>
               </div>
            </div>
         </div>
      </template>
      <template id="udredit-template">
         <tr>
            <td>${MathML.sans(group.representation[inx])}</td>
            <td><textarea maxlength="50" rows="1" style="width: 24em">${rep.slice(7,-8)}</textarea></td>
         </tr>
      </template>

      <h3 id="Notes">Notes</h3>
      <div id="notes-area" class="indent1">
         <div id="notes-show">
            <div id="notes-content"><i>none</i></div>
            <br><a href="javascript:Notes.edit()">Click to edit notes</a>
         </div>
         <div id="notes-edit" class="hidden" >
            <textarea id="notes-text" maxlength="1000" rows="10"></textarea>
            <div id="notes-buttons">
               <button onclick="Notes.clear()">Clear</button>
               <button onclick="Notes.show()">Cancel</button>
               <button onclick="Notes.save()">Save</button>
            </div>
         </div>
      </div>
   </body>
</html>
